<template>
  <div class="login">
    <div class="login-box">
      <h4 class="tit">超级外卖管理员系统</h4>

      <!-- size="mini" -->
      <el-form
        :model="ruleLogin"
        :rules="rules"
        ref="ruleLogin"
        class="demo-ruleLogin"
      >
        <el-form-item prop="account">
          <el-input
            type="text"
            v-model="ruleLogin.account"
            autocomplete="off"
            prefix-icon="iconfont icon-yonghu"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            :type="!isshowPw ? 'password' : 'text'"
            v-model="ruleLogin.password"
            autocomplete="off"
            prefix-icon="iconfont icon-mima"
            @keydown.enter="submitForm('ruleLogin')"
          >
            <template #suffix>
              <i
                :class="{
                  'iconfont icon-eyes': !isshowPw,
                  'iconfont icon-eyes-': isshowPw
                }"
                @click="isshowPw = !isshowPw"
              ></i>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm('ruleLogin')"
            @keydown.enter="submitForm('ruleLogin')"
            :loading="islogin"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { userLogin } from '../req/userAjax'
import store from '@/util/storeManage'
import { alterSuccess } from '@/util/msgTips'
import { validateAccount, validatePassword } from '@/util/rule/fromRule'

import { filterRouter } from '@/router/index'
export default {
  data () {
    return {
      isshowPw: false, // false 为不显示密码

      ruleLogin: {
        password: '',
        account: ''
      },
      // 规则
      rules: {
        account: [{ validator: validateAccount, trigger: 'blur' }],
        password: [{ validator: validatePassword, trigger: 'blur' }]
      },
      islogin: false
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          this.islogin = true
          try {
            const { token, code, msg, role } = await userLogin(this.ruleLogin)
            if (code === 0) {
              store.del('role')
              store.del('router')
              store.del('t_k')
              store.set('t_k', token)
              store.set('role', role)
              alterSuccess(msg)

              console.log(store.get('role'))
              // 权限 过滤
              filterRouter()
              // 1秒后进入
              setTimeout(() => {
                this.islogin = false
                this.$router.replace('/')
              }, 1000)
            } else {
              // 错误提示
              this.islogin = false
              const close = this.$message.error('密码或账户错误!')
              setTimeout(() => {
                close.close()
              }, 1000)
              return false
            }
          } catch (error) {
            this.islogin = false
          }
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  background-image: url('../assets/imgs/dw.png');
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .login-box {
    letter-spacing: 3px;
    width: 400px;
    height: 300px;
    color: #fff;
    text-align: center;

    .tit {
      margin: 30px 0;
      font-weight: normal;
      font-size: 18px;
    }
    .el-form-item {
      margin-top: 8px;
      width: 100%;
    }

    .el-button {
      width: 100%;
    }
  }
}
</style>
